<template>
	<view class="index">

		<u-sticky>
			<Navigation backType="city" background="#FABB3C" />
			<view class="pv-10 search ph-24" style="
    width: 100%;">
				<u-search placeholder="快速查找戳我" v-model="keyword" height="30" bgColor="#FFFFFF" searchIconColor="#999"
					placeholderColor="#999" :showAction="false" @search="searchTap">
				</u-search>
				<view class="w-100 search-btn">
					<u-button text="搜索" color="#FABB3C" shape="circle" @click.stop="searchTap"></u-button>
				</view>

			</view>
			<view class="w-f h-96 top-bg ph-20 f ai-c jc-s-b" style="background-color: #fff;" v-if="isTop">
				<view class="f ai-c jc-s-b f1">
					<view class="f ai-c" @click='showCate=true'>
						<view class="mr-12 fs-28 text-color4">全部分类</view>
						<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
					</view>
					<view class="f ai-c">
						<view class="mr-12 fs-28 text-color4">附近</view>
						<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
					</view>
					<view class="f ai-c" @click='showSort=true'>
						<view class="mr-12 fs-28 text-color4">综合排序</view>
						<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
					</view>
				</view>
				<image src="../../static/serve/shadow.png" class="w-16 h-40 ml-16"></image>
				<view class="f ai-c ml-32">
					<image src="../../static/logo.png" class="w-30 h-30 mr-8"></image>
					<view class="fs-28 text-color4">筛选</view>
				</view>

			</view>

		</u-sticky>
		<u-swiper :list="topBannerLists" radius="0" height="200" keyName="picUrl"></u-swiper>

		<view class="content">
			<!-- <Menu ref="menuRef" /> -->
			<view class=" menu pt-40 ph-24">
				<u-scroll-list indicatorColor="#F0F0F0" indicatorActiveColor="#FABB3C" indicatorWidth="25"
					indicatorBarWidth="15" :indicatorStyle="{ marginTop: '0' }">
					<view class="f fd-c">
						<view class="f">
							<view class="f fd-c ai-c menu2-box mb-32 mr-48" @click="toBusiness(item.id,index)"
								v-for="(item,index) in menuRef">
								<image :src="item.picUrl" class="w-52 h-52"></image>
								<view class="mt-16 fs-24 fw-400 text-color6">{{ item.name }}</view>
							</view>

						</view>

					</view>
				</u-scroll-list>
				<image mode="aspectFill" :src="bannerLists[0].picUrl" v-if="bannerLists" class="w-f h-180 mt-8"></image>
			</view>
			<view class="list mt-32">
				<view class="w-f h-112 top-bg ph-32 f ai-c jc-s-b" v-if="!isTop">
					<view class="f ai-c jc-s-b f1">
						<view class="f ai-c" @click='showCate=true'>
							<view class="mr-12 fs-28 text-color4">全部分类</view>
							<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
						</view>
						<view class="f ai-c">
							<view class="mr-12 fs-28 text-color4">附近</view>
							<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
						</view>
						<view class="f ai-c" @click='showSort=true'>
							<view class="mr-12 fs-28 text-color4">综合排序</view>
							<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
						</view>
					</view>
					<image src="../../static/serve/shadow.png" class="w-16 h-80 ml-16"></image>
					<view class="f ai-c ml-32">
						<image src="../../static/logo.png" class="w-30 h-30 mr-8"></image>
						<view class="fs-28 text-color4">筛选</view>
					</view>
				</view>
				<view class="ph-24">
					<view class="box mt-20 b-24 ph-28 pv-28 mb-8" v-for="(item, index) in list" :key="index"
						@click="toStore(item)">
						<view class="f ai-c jc-s-b">
							<image :src="item.picUrl" v-if="item.picUrl" class="w-180 h-180 mr-24"></image>
							<view class="f f1 fd-c">
								<view class="fs-32 fw-600 text-color4 text-ellipsis-1">{{item.name}}</view>
								<view class="f mt-12">
									<image :src="index2 < item.storeScore ? star : starSelect" class="w-24 h-24 mr-8"
										v-for="(item2, index2) in 5" :key="index2"></image>
								</view>
								<view class="f ai-c jc-s-b mt-12">
									<view class="f f1 text-ellipsis-1 fs-26 text-color4">
										{{item.addressName}}{{item.addressDetail}}
									</view>
									<view class="fs-26 text-color3">{{calculateDistance(item.lat,item.lng)}}km</view>
								</view>
								<view class="mt-8">

									<text class="fs-22 text-color3">营业时间：</text>
									<text class="fs-22 text-color4">{{item.businessHours}}</text>
								</view>
							</view>
						</view>
						<view class="f ai-c jc-s-b mt-12" @click.stop="toDetail(item2)"
							v-for="(item2,index2) in item.serverProductRespVO">
							<view class="f f1 ai-c">
								<view class="f mr-15 ai-c">
									<view class="w-32 h-28 fs-20 text-color5 f ai-c jc-c mr-8 favour"
										v-if="item2.discountPrice>0">惠
									</view>
									<view class="fs-26 fw-600 text-color7 mr-8">¥{{item2.price}}</view>
									<!-- <view class="w-44 h-28 b-4 fs-20 text-color8 discount">{{item.discountPrice}}折</view> -->
								</view>
								<view class="f f1 text-ellipsis-1 fs-26 text-color4">{{item2.name}} </view>
							</view>
							<view class="fs-26 text-color4">年售{{item2.serverSalesCount}}+</view>
						</view>
					</view>
				</view>
				<!-- <u-action-sheet :show="showCate" :actions="cateList" title="请选择类型" @close="showCate = false"
					@select="cateSelect">
				</u-action-sheet> -->
				<u-action-sheet :show="showSort" :actions="sortList" title="请选择排序" @close="showSort = false"
					@select="sortSelect">
				</u-action-sheet>
				<u-popup mode="top" :safe-area-inset-bottom="false" :show="showCate" @close="showCate=false">
					<view>
						<Navigation backType="city" background="#FABB3C" />
						<view class="pv-10 search ph-24" style="
						width: 100%;">
							<u-search placeholder="快速查找戳我" v-model="keyword" height="30" bgColor="#FFFFFF"
								searchIconColor="#999" placeholderColor="#999" :showAction="false" @search="searchTap">
							</u-search>
							<view class="w-100 search-btn">
								<u-button text="搜索" color="#FABB3C" shape="circle" @click.stop="searchTap"></u-button>
							</view>

						</view>
						<view class="w-f h-96 ph-20 f ai-c jc-s-b" style="background-color: #fff;">
							<view class="f ai-c jc-s-b f1">
								<view class="f ai-c" @click='tab=0'>
									<view class="mr-12 fs-28 text-color4">全部分类</view>
									<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
								</view>
								<view class="f ai-c">
									<view class="mr-12 fs-28 text-color4">附近</view>
									<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
								</view>
								<view class="f ai-c" @click='showSort=true'>
									<view class="mr-12 fs-28 text-color4">综合排序</view>
									<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
								</view>
							</view>
							<image src="../../static/serve/shadow.png" class="w-16 h-40 ml-16"></image>
							<view class="f ai-c ml-32">
								<image src="../../static/logo.png" class="w-30 h-30 mr-8"></image>
								<view class="fs-28 text-color4">筛选</view>
							</view>

						</view>
						<view class="f" style="width: 100%;height: 500rpx;" v-if="tab==0">
							<scroll-view scroll-y class="left">
								<view class="nameAct">全部分类</view>
								<view class="name">全部分类</view>
								<view class="name">全部分类</view>
							</scroll-view>
							<scroll-view scroll-y class="right">
								<view class="hangAct">
									<view>全部</view>
									<u-icon name="checkmark" color="#FABB3C"></u-icon>
								</view>
								<view class="hang" v-for="item in 10">
									<view>全部</view>
								</view>
							</scroll-view>
						</view>
						<view class="f" style="width: 100%;height: 500rpx;" v-if="tab==1">
							<scroll-view scroll-y class="left">
								<view class="nameAct">附近</view>
								<view class="name">推荐</view>
								<view class="name">商场</view>
								<view class="name">行政区/商圈</view>
								<view class="name">地铁线</view>
							</scroll-view>
							<scroll-view scroll-y class="right">
								<view class="grid">
									<view class="gItemAct">附近</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
								</view>
								<view class="hangAct">
									<view>全部</view>
									<u-icon name="checkmark" color="#FABB3C"></u-icon>
								</view>
								<view class="hang" v-for="item in 10">
									<view>全部</view>
								</view>
							</scroll-view>
						</view>
						<view style="width: 100%;" v-if="tab==2">
							<view class="hangAct">
								<view>默认排序</view>
								<u-icon name="checkmark" color="#FABB3C"></u-icon>
							</view>
							<view class="hang">
								<view>距离优先</view>
							</view>
							<view class="hang">
								<view>好评优先</view>
							</view>
							<view class="hang">
								<view>销量优先</view>
							</view>
						</view>
						<view style="width: 100%;padding:0 40rpx 40rpx 40rpx;" v-if="tab==3">
							<scroll-view scroll-y style="height: 50vh;">
								<view class="topTitle">价格</view>
								<view class="grid2 mb-48">
									<view class="gItemAct">附近</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
								</view>
								<view class="topTitle">营业时间</view>
								<view class="grid2 mb-48">
									<view class="gItemAct">附近</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
									<view class="gItem">500m</view>
								</view>
								<view class="topTitle">服务优惠</view>
								<view class="grid2 mb-48">
									<view class="gItemAct">可手术</view>
									<view class="gItem">可手术</view>
									<view class="gItem">可手术</view>
									<view class="gItem">可手术</view>
									<view class="gItem">可手术</view>
									<view class="gItem">可手术</view>
									<view class="gItem">可手术</view>
								</view>
								<view class="topTitle">入驻时间</view>
								<view class="grid2 mb-48">
									<view class="gItemAct">新店</view>
									<view class="gItem">3年以上</view>
									<view class="gItem">10年以上</view>
								</view>
								<view style="height: 40rpx;"></view>
							</scroll-view>
							<view class="bottomHang">
								<view class="react">
									<image src="../../static/shua.png"></image>
									<view class="name">重置</view>
								</view>
								<view class="btns">确定</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- tab -->
		<!-- <Tabbar tab="3"/> -->
	</view>
</template>
<script setup lang="ts">
	import { ref, toRefs } from 'vue';
	import { useAuthStore } from '@/store/modules/auth';
	import { onShow, onPageScroll } from '@dcloudio/uni-app';
	import { getBaseUrl } from '@/utils/env';
	import star from '@/static/index/star.png';
	import starSelect from '@/static/index/star-select.png';
	import { categoryTopList, servicePage, storepage } from '@/services/api/serve/index';
	import List from './List.vue';
	import { promotionBannerList, bannerList } from '@/services/api/banner';

	// import {categoryFirstList}
	const authStore = useAuthStore();
	const bannerLists = ref<any[]>();
	const keyword = ref('');
	const menuRef = ref<any[]>([]);
	const firstList = ref<any[]>([]);
	const lat = ref(0);
	const lng = ref(0);
	const isTop = ref(false);
	const tab = ref(3)
	const listQuery = ref({
		pageNo: 1,
		pageSize: 10,
		// firstCategoryId: '',
		// secondCategoryId: '',
		// keyword: '',
		// sortField: 'intelligent',
		// sortAsc: false,
	});
	const sortList = ref([
		{ name: '综合优先', id: 'intelligent' },
		{ name: '销量优先', id: 'salesCount' },
		{ name: '好评优先', id: 'favorable' },
		{ name: '价格优先', id: 'price' },
	]);
	const cateList = ref<any>([]);
	const list = ref<any>([]);
	const showCate = ref(false);
	const showSort = ref(false);
	const topBannerLists = ref<any[]>([]);
	onPageScroll(res => {
		if (res.scrollTop > 380) {
			isTop.value = true
		} else {
			isTop.value = false
		}
	})
	onShow(() => {
		//城市
		const cityName = ref<string | undefined>('');
		cityName.value = authStore.getCity;
		getCity();
		getBanner();
		getCate();
	});
	async function getCate() {

		const { data } = await categoryTopList({ type: 1 });
		cateList.value = data;
		menuRef.value = data;
		getContentPage()
	}

	async function getContentPage() {

		const { data } = await storepage(listQuery.value);
		list.value = data.list
	}
	const cateSelect = (data : any) => {
		listQuery.value.pageNo = 1;
		listQuery.value.firstCategoryId = data.id;
		list.value = [];
		showCate.value = false
		getContentPage();
	};
	const sortSelect = (data : any) => {

		listQuery.value.pageNo = 1;
		listQuery.value.sortField = data.id;
		// listQuery.value.firstCategoryId = data.id;
		list.value = [];
		showSort.value = false
		getContentPage();
	};
	function toDetail(item : any) {
		uni.navigateTo({
			url: `/pages_serve/productDetails/index?id=${item.id}`,
		});
	}
	function toStore(item : any) {
		uni.navigateTo({
			url: `/pages_shop/business/index?id=${item.id}`,
		});
	}
	function onReachBottom() {
		listQuery.value.pageNo++;
		getContentPage();
	}

	function calculateDistance(lat1 : number, lon1 : number) {
		let lat2 : number = lat.value
		let lon2 : number = lng.value
		console.log(lat2, lon2)
		const radians = Math.PI / 180;
		const R = 6371; // 地球半径，单位为千米

		const deltaLat = (lat2 - lat1) * radians;
		const deltaLon = (lon2 - lon1) * radians;

		lat1 = lat1 * radians;
		lat2 = lat2 * radians;

		const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			Math.cos(lat1) * Math.cos(lat2) *
			Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		const distance = R * c;
		return distance.toFixed(2);
	}
	//获取banner
	async function getBanner() {
		const { data } = await promotionBannerList({});
		try {
			const bannerData = await bannerList({ positionName: '服务广告' });
			bannerLists.value = bannerData.data;

			const res = await bannerList({ positionName: '服务首图' });
			topBannerLists.value = res.data;
		} catch {
		}


	}



	//搜索
	const searchTap = () => {

		uni.navigateTo({
			url: '/pages_serve/businessList?keyword=' + keyword.value,
		});
	};

	function toBusiness(id : number, index : number) {
		uni.navigateTo({
			url: '/pages_serve/businessList?cate_id=' + id + '&index=' + index,
		});
	};

	function getCity() {
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: function (res) {
				lat.value = res.latitude
				lng.value = res.longitude
			},
			fail: function (res) {
				console.log(res);
			},
		});
	}
</script>
<style lang="scss" scoped>
	.topTitle {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.bottomHang{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #F8F8F8;
		padding-top: 20rpx;
		.btns{
			width: 558rpx;
			height: 96rpx;
			background: #FABB3C;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			color:#fff;
			font-size: 32rpx;
			
		}
		.react{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.name{
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 16rpx;
		padding: 28rpx 40rpx;

		.gItem {
			width: 126rpx;
			height: 64rpx;
			background: #F5F5F5;
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
		}

		.gItemAct {
			width: 126rpx;
			height: 64rpx;
			background: #FAF5E6;
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
			color: #FABB3C;
		}
	}

	.grid2 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 16rpx;

		.gItem {
			width: 100%;
			height: 64rpx;
			background: #F5F5F5;
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
		}

		.gItemAct {
			width: 100%;
			height: 64rpx;
			background: #FAF5E6;
			border-radius: 32rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
			color: #FABB3C;
		}
	}

	.left {
		height: 500rpx;
		width: 260rpx;
		background-color: #F8F8F8;

		.nameAct {
			padding: 22rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #FABB3C;
			background-color: #fff;
		}

		.name {
			padding: 22rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
		}
	}

	.hang {
		padding: 22rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.hangAct {
		padding: 22rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #FABB3C;
	}

	.right {
		flex: 1;
		height: 500rpx;

	}

	.list {
		.discount {
			background: #fff5f5;
		}

		.favour {
			background: #f54040;
		}

		.box {
			background: #fff;
		}

		.top-bg {
			background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 67%, #f5f5f5 100%);
			border-radius: 24rpx 24rpx 0 0;
		}
	}

	.topNav {
		position: fixed;
		top: 196rpx;
		width: 100%;
		border-radius: 0 !important;
	}

	.index {
		background: #f5f5f5;

		.content {
			position: relative;
			top: -100rpx;
		}

		.search {
			position: relative;
			background: #fabb3c;

			.search-btn {
				position: absolute;
				right: 30rpx;
				top: 18rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}
	}

	.menu {
		background: #ffffff;
		border-radius: 24rpx;
		width: 100%;

		.menu2-box {
			width: 96rpx;
		}
	}
</style>